<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
<!-- 			<a href="#" @click="prev" v-show="index != 0">上一张</a>
			<a href="#" @click="next" v-show="index < imgArr.length-1">下一张</a> -->
			<a href="#" @click="prev" v-if="index != 0">上一张</a>
			<a href="#" @click="next" v-if="index < imgArr.length-1">下一张</a>
			
			<br/>
			<img :src="imgArr[index]" />
			
		</div>
		
		
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					imgArr:[
						"img/00.jpg",
						"img/01.jpg",
						"img/02.jpg",
						"img/03.jpg",
						"img/04.jpg",
					],
					index:0,
					
				},
				methods:{
					prev:function(){
						this.index--;
					},
					next:function(){
						this.index++;
					}
				}
			})
		</script>
	</body>
</html>
